
<template>
  	<div>
		<template v-if="!recordFlag">
			<h2 class="public-title">会员报表</h2>
			<div class="search-wrapper clearfix">
				<div class="search-item item-input">
					<Select v-model="sortType">
						<Option v-for="item in sortTypeList" :value="item.id" :key="item.id">{{item.name}}</Option>
					</Select>
				</div>
				<div class="search-item item-input">
					<Input v-model="searchValue" placeholder="输入搜索账号"></Input>
				</div>
				<div class="search-item item-auto">
					<span>投注时间：</span>
					<!-- <span v-show="beginTime == '' && endTime == ''" style="margin-right:10px;">全部</span> -->
				</div>
				<div class="search-item item-DatePicker">
					<DatePicker :options="startOption" v-model="beginTime" ref="beginTime" placeholder="开始时间"></DatePicker>
					<DatePicker :options="startOption" v-model="endTime" ref="endTime" placeholder="结束时间"></DatePicker>
				</div>
				<div class="search-item"><Button type="error" @click="search">搜索</Button></div>
				<div class="search-item trading">
					<span class="text">|</span>
					<span :class="msg == 1 ? 'cur' : ''" @click="_getDate( 0, 'DD', 1)">今天</span>
					<span :class="msg == 2 ? 'cur' : ''" @click="_getDate(-1, 'DD', 2)">昨天</span>
					<span :class="msg == 3 ? 'cur' : ''" @click="_getDate( 7, 'DD', 3)">本周</span>
					<span :class="msg == 4 ? 'cur' : ''" @click="_getDate( 0, 'MM', 4)">本月</span>
					<span :class="msg == 5 ? 'cur' : ''" @click="_getDate(-1, 'MM', 5)">上月</span>
				</div>
			</div>
			<!-- 表格部分 -->
			<Table stripe :columns="tableData" :data="listData" :loading="listLoading"></Table>
			<Modal v-model="detailModal" title="会员报表详情" cancel-text>
				<div v-if="dataLoading" class="noContent">
					<Spin fix size="large"></Spin>
				</div>
				<template v-else>
					<template v-if="detailData != ''">
						<Table :columns="detailCol1" :data="detailData"></Table>
						<Table :columns="detailCol2" :data="detailData"></Table>
						<Table :columns="detailCol3" :data="detailData"></Table>
						<Table :columns="detailCol4" :data="detailData"></Table>
					</template>
					<div v-else class="noContent noContent-img"></div>
				</template>
			</Modal>

			<div class="page-wrapper" v-show="listData.length">
				<Page :total="pageCount" @on-change="_getPage(page)" :current.sync="page"></Page>
			</div>
		</template>

		<tradingRecord v-else :transferId="transferId" :transferUser="transferUser" @recordHide="recordHide"></tradingRecord>
    </div>
</template>
<script>
import formatDate from '../../../common/js/date.js';
import dateSelection from '@/common/js/dateSelection.js';
import tradingRecord from '../dealDetail/dealDetail';
export default {
	components: {
		tradingRecord
	},
    data() {
		return {
			startOption: {
				disabledDate (date) {
					return date && date.valueOf() > Date.now()
				}
			},
			beginTime: '', //开始时间
			endTime: '', //结束时间
			sortTypeList: [{id:1, name:'最后离线'}, {id:2, name:'最新注册'}, {id:3, name:'盈亏最多'}],
			sortType: 1, //选择类型
			searchValue: '', //搜索内容
			msg: -1,
			pageCount: 10, //分页数（10等于一页）
			page: 1, //分页
			regtime: '',
			listLoading: false, //列表数据加载
			dataLoading: false, //详情数据加载

			recordFlag: false,
			transferId: '',
			transferUser: '',

			listData: [], //列表数据
			tableData: [
				{  
					title: '注册时间',
					key: 'regtime'
				},{
					title: '账号',
					key: 'username'
				},{
					title: '会员盈亏',
					// key: 'total_profit_amt'
					render: function(h, params) {
						return h("div", [
							h("span", {
								style: {
									color: '#D22727',
								}
							}, params.row.total_profit_amt)
						]);
					}
				},{
					title: '账号余额',
					key: 'money'
				},{
					title: '操作',
					key: 'divq',
					width: 220,
					render: (h, params) => {
						if(this.showDtl){
							return h('div', [
								h('Button', {
									props: {},
									style: {
										color: '#ed3f14',
									},
									on: {
										click: () => {
											this.detailModal = true
											this._getDetailData(params.index)
										}
									}
								}, '详情'),
								h('Button', {
									props: {},
									style: {
										color: '#ed3f14',
										marginLeft: '10px'
									},
									on: {
										click: () => {
											this.tradingRecord(params.row.user_id, params.row.username);
										}
									}
								}, '查看交易记录'),
							]);
						}else{
							return h('div', [
								h('Button', {
									props: {},
									style: {
										color: '#ed3f14',
									},
									on: {
										click: () => {
											this.detailModal = true
											this._getDetailData(params.index)
										}
									}
								}, '详情'),
							]);
						}
						
					}
				}
			],

			detailModal: false, //详情弹框
			detailData: [], //详情数据
			detailCol1: [
				{
					title: '账号',
					key: 'username'
                },{
					title: '直属(人数)',
					key: 'directly'
                },{
					title: '团队(人数)',
					key: 'team'
                },{
                  title: '充值(自身)',
                  key: 'recharge'
				}
			],
			detailCol2: [
				{
					title: '提现(自身)',
					key: 'cash'
                },{
					title: '中奖(自身)',
					key: 'award'
                },{
					title: '自身投注',
					key: 'betting'
                },{
					title: '直属会员投注',
					key: 'directly_Betting'
				}
			],
			detailCol3: [
				{
					title: '团队投注',
					key: 'team_Betting'
                },{
					title: '返点(%)',
					key: 'backwater'
                },{
					title: '团队返点总额',
					key: 'teamBackwater'
                },{
					title: '自身返点总额',
					key: 'selfBackwater'
				}
			],
			detailCol4: [
				{
					title: '活动优惠',
					key: 'total_hd_money'
                },{
					title: '其他收入',
					key: 'total_other_income'
                }
			],
			showDtl: false,
		}
    },
    created() {
		this.resetAll();
    },
    methods: {
		tradingRecord(id, user) {
			if (!this.$route.query.record) {
				let url = window.location.href + '&record=1';
				window.open(url, '_self');
			}
			this.transferId = id;
			this.transferUser = user;
			this.recordFlag = true;
		},
		recordHide(data) {
			this.recordFlag = data;
		},
		_getTimes() { //初始化时间
			this.beginTime = this.$refs.beginTime.visualValue;
			this.endTime = this.$refs.endTime.visualValue;
		},
		search() { //搜索
			let vm = this;
			vm.msg = -1;
			vm.page = 1;
			vm._getTimes();
			if (vm.beginTime > vm.endTime) {
				vm.$Message.warning('结束时间不能小于开始时间');
				return false;
			}
			vm._getListData();
		},
		_getDate(num, string, index) {
			let vm = this;
			vm.msg = index;
			vm.page = 1;
			if (num == 7) { //获取本周
				let date = new Date();
				let timestamp = date.getTime(); //当天时间戳
				let weekday = date.getDay();
				vm.beginTime = formatDate(new Date(timestamp - 3600 * 1000 * 24 * weekday), 'yyyy-MM-dd');
				vm.endTime = formatDate(new Date(timestamp), 'yyyy-MM-dd');
			} else {
				let newtime = dateSelection(num, string);
				vm.beginTime = formatDate(new Date(newtime.beginTime), 'yyyy-MM-dd');
				vm.endTime = formatDate(new Date(newtime.endTime), 'yyyy-MM-dd');
			}
			this._getListData();
		},
		_getPage(page) {
			let vm = this;
			vm.page = page;
			vm._getTimes();
			vm._getListData();
		},
		resetAll() {
			let vm = this;
			vm.sortType = 1;
			vm.beginTime = '';
			vm.endTime = '';
			vm.msg = -1;
			vm.page = 1;
			vm._getListData();
			this.$http.post('?m=api&c=account&a=teamUserTradeRecordSw',{}).then(res=>{
				if(res.data.data==1){
					//允许查看交易记录
					this.showDtl=true
				}
			})
		},
		_getListData() { //列表页数据
			let vm = this;
			vm.listLoading = true;
			let params = {};
				params.token = localStorage.getItem('token');
				params.start_time = vm.beginTime;
				params.end_time = vm.endTime;
				params.sort_type = vm.sortType;
				params.user_value = vm.searchValue;
				params.page = vm.page;
			vm.$http.post(vm.urlRequest + "?m=api&c=user&a=myMember", params).then(res => {
				if (res.data.status == 0) {
					vm.searchValue = '';
					vm.listData = res.data.list;
					vm.pageCount = res.data.pagecount * 10;
					vm.listData.forEach(val => {
						vm.regtime = formatDate(new Date(val.regtime * 1000), 'yyyy-MM-dd hh:mm')
						val.regtime = vm.regtime
					});
					console.log(vm.listData, 'listData')
				} else {
					if (res.data.ret_msg != '') {
						this.$Message.warning(res.data.ret_msg);
					}
				}
				vm.listLoading = false;
			}).catch(err => {
				vm.listLoading = false;
				console.log(err)
			})
		},
		_getDetailData(i) { //详情页数据
			let vm = this;
			vm._getTimes();
			vm.dataLoading = true;
            let params = {};
                params.token = localStorage.getItem('token');
                params.id = vm.listData[i].id;
				params.start_time = vm.beginTime;
				params.end_time = vm.endTime;
            vm.$http.post(vm.urlRequest + '?m=api&c=user&a=memberDetail', params).then( res => {
                if (res.data.status == 0) {
					vm.detailData[0] = res.data;
					console.log(vm.detailData, 'detailData')
				} else {
					if (res.data.ret_msg != '') {
						vm.$Message.warning(res.data.ret_msg);
					}
				}
				vm.dataLoading = false;
            }).catch(err => {
				vm.dataLoading = false;
                console.log(err)
            })
        }
    },
    watch: {     
		$route(to, from) {
			if (!this.$route.query.record) {
				this.recordHide(false);
			}
		}
    }
}
</script>
<style scoped>
.search-wrapper {
	display: flex;
	justify-content: flex-start;
	margin: 20px 0;
	width: 100%;
	height: auto;
	line-height: 32px;
}
.search-wrapper .search-item {
	margin-right: 10px;
}
.search-wrapper .item-input {
	width: 100px;
}
.search-wrapper .item-auto {
	width: auto;
	margin-right: 0;
}
.search-wrapper .item-DatePicker {
	width: 240px;
	display: flex;
	justify-content: space-between;
}
.search-wrapper .item-DatePicker >>> .ivu-date-picker {
	width: 48%;
}
.search-wrapper .trading span {
	display: inline-block;
	margin: 4px 0;
	padding: 0 5px;
	line-height: 24px;
	cursor: pointer;
}
.search-wrapper .trading .text:hover {
  	color: red;
}
.search-wrapper .cur {
	color: #fff;
	background: #ed3f14;
	border-radius: 10%;
}

.noContent {
	position: relative;
    height: 200px;
}
.noContent-img {
	background: url('../../../assets/images/no-content.png') no-repeat center;
}
.item-list {
	padding: 0 10px;
	height: auto;
	max-height: 288px;	
	overflow: auto;
}
.item-list::-webkit-scrollbar {/*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.item-list::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.2);
}
.item-list::-webkit-scrollbar-track {/*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}
.item-list ul li {
	display: flex;
    justify-content: space-between;
	line-height: 35px;
	font-size: 14px;
    border-bottom: 1px solid #eee;
    
}
.item-list ul li span:first-child {
    color: #999;
}
.page-wrapper {
	margin: 20px 0;
	width: 100%;
	text-align: center;
}
</style>



// WEBPACK FOOTER //
// src/components/PersonalCenter/teamManager/vipReport.vue